<%@ page import="lesbonsamis.Depense" %>
<html>
    <head>
        <meta name="layout" content="main" />
    </head>
    
    <body>
    	<div data-role="page" data-cache="never">
	        <div data-role="header" id="navigation" class="nav" data-theme="b">
	        	<h1>Dépenses</h1>
		        
		        <div data-role="navbar" class="nav">
			        <ul>
			        	<li><a href="${createLink(controller:'projet', action: 'editer')}" id="accueil" data-icon="custom">Accueil</a></li>
			        	<li><a href="${createLink(controller:'participant', action: 'liste')}" id="participants" data-icon="custom">Participants</a></li>
			        	<li><a href="${createLink(controller:'depense', action: 'liste')}" id="depenses" data-icon="custom">Dépenses</a></li>
			        	<li><a href="${createLink(controller:'transaction', action: 'liste')}" id="resultats" data-icon="custom">Résultats</a></li>
			        </ul>
		        </div>
	        </div>
	                
	        <div data-role="content" id="content">
		        <g:link action="creer" data-role="button" data-icon="add">Ajouter</g:link>
		        
	        	<g:if test="${listeDepense?.size() != 0}">
				<ul data-role="listview" id="liste" data-inset="true">
				    <g:each in="${listeDepense}" status="i" var="depense">
                    <li>
                    	<g:link action="editer" id="${depense?.id}">
                    		<h3>${depense?.nom.encodeAsHTML()} - ${depense?.montant} €</h3>
                    		<p>Ratio participant ${depense?.ratioParticipant}</p>
                    		<p>Payé par ${depense?.payeur.nom.encodeAsHTML()}</p>
                    		<p>Pour
                    			<g:each in="${depense.consommateurs}" status="j" var="consommateur">
                    				<g:if test="${j!=0}"> | </g:if>${consommateur.nom.encodeAsHTML()}
                    			</g:each>
				    		</p>
                    	</g:link>
                    	
                    	<g:link action="supprimer" id="${depense?.id}" data-icon="delete"></g:link>
                    </li>
					</g:each>
				</ul>
				</g:if>
				<g:else>
				La liste des dépenses est vide. Cliquer sur "Ajouter" pour ajouter une nouvelle dépense. 
				</g:else>
	        </div>
	        
	        <script type="text/javascript">
    			$('[data-role=page]').live('pageshow', function () {   
  			    	$('#liste').listview('refresh');
  				});
	        </script>	 
        </div>
    </body>
</html>
                